<template>
  <div class="index">
    <h1>使用el-card进行二次封装</h1>
    <el-link
      href="https://wensanshi.feishu.cn/mindnotes/bmncnv49MfxKgFP6d4ehBFH7D0b"
      target="_blank"
      type="primary"
      >组件说明</el-link
    >
    <br /><br />

    <el-row :gutter="20">
      <el-col :span="12">
        <comCard title="卡片" text="（2021-09-29 v0.0.1）">
          <!-- 主体内容 -->
          <div class="list" v-for="o in 4" :key="o">
            {{ "填充 " + o }}
          </div>
        </comCard>
      </el-col>

      <el-col :span="12">
        <comCard title="卡片" text="文字">
          <!-- 头部内容 -->
          <div class="haeder" slot="header-right">
            <!-- 文字按钮 -->
            <el-button type="text" size="mini">文字按钮</el-button>
          </div>
          <!-- 主体内容 -->
          <div class="list" v-for="o in 4" :key="o">
            {{ "填充 " + o }}
          </div>
        </comCard>
      </el-col>
    </el-row>
      <br>
    <el-row :gutter="20">
      <el-col :span="12">
        <comCard title="卡片" text="（2021-09-29 v0.0.1）">
          <!-- 头部内容 -->
          <div class="haeder" slot="header-right">
            <!-- 下拉框 -->
            <el-select v-model="selectValue" size="mini" placeholder="下拉框">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </div>
          <!-- 主体内容 -->
          <div class="list" v-for="o in 4" :key="o">
            {{ "填充 " + o }}
          </div>
        </comCard>
      </el-col>

      <el-col :span="12">
        <comCard title="卡片" text="文字">
          <!-- 头部内容 -->
          <div class="haeder" slot="header-right">
            <!-- 按钮组 -->
            <el-button-group>
              <el-button v-for="num in 4" :key="num" plain size="mini"
                >按钮{{ num }}</el-button
              >
            </el-button-group>
          </div>
          <!-- 主体内容 -->
          <div class="list" v-for="o in 4" :key="o">
            {{ "填充 " + o }}
          </div>
        </comCard>
      </el-col>
    </el-row>
      <br>
    <el-row :gutter="20">
      <el-col :span="24">
        <comCard title="卡片" text="（2021-09-29 v0.0.1）">
          <!-- 头部内容 -->
          <div class="haeder" slot="header-right">
            <!-- 下拉框 -->
            <el-select v-model="selectValue" size="mini" placeholder="下拉框">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
            <!-- 按钮组 -->
            <el-button-group>
              <el-button v-for="num in 4" :key="num" plain size="mini"
                >按钮{{ num }}</el-button
              >
            </el-button-group>
            <!-- 文字按钮 -->
            <el-button type="text" size="mini">文字按钮</el-button>
          </div>
          <!-- 主体内容 -->
          <div class="list" v-for="o in 4" :key="o">
            {{ "填充 " + o }}
          </div>
          <div class="bottom">
            <el-button type="text" size="mini">文字按钮</el-button>
          </div>
        </comCard>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import comCard from "@/wss/components/comCard.vue";
export default {
  name: "Index",

  components: { comCard },

  directives: {},

  data() {
    return {
      selectValue: "",
    };
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
.index {
  padding: 20px;
  .haeder {
    padding: 20px 0;
  }
  .list {
    height: 40px;
    line-height: 40px;
    background: rgb(170, 170, 170);
    margin: 10px 0;
    border-radius: 5px;
  }
  .bottom {
    float: right;
  }
}
</style>
